<template>
  <div class="page-user-account-permission">
    <div class="title">{{ lang.t('permission') }}</div>
    <t-row :gutter="20">
      <t-col :span="6" v-for="item in userStore.getPermission()">
        <div 
          class="item flash" 
          :class="{'on': permission ? permission.includes(item.id()) : false }" 
          @click="onSelect('permission', item.id())"
        >
          <div class="name">
            {{ item.name() }}
          </div>
          <div class="body wrap">
            {{ item.content() }}
          </div>
        </div>
      </t-col>
    </t-row>
    <div class="title">{{ lang.t('plugin') }}</div>
    <t-row :gutter="20">
      <t-col :span="4" v-for="item in userStore.getPlugin()">
        <div 
          class="item flash" 
          :class="{'on': plugin ? plugin.includes(item.id()) : false }" 
          @click="onSelect('plugin', item.id())"
        >
          <img :src="item.img()" />
          <div class="name">
            {{ item.name() }}
          </div>
          <div class="body wrap">
            {{ item.content() }}
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue'
  import app from '@/app'
  import userStore from '@/store/user'

  const props = defineProps(['permission', 'plugin'])
  const emit = defineEmits(['update:permission', 'update:plugin'])
  const lang = app.lang.space('page.user.account')

  const onSelect = (type, id) => {
    // 数组深拷贝
    const data = [...props[type]]
    
    if(data.includes(id)) {
      data.splice(data.findIndex(find => find == id), 1)
    } else {
      data.push(id)
    }

    emit('update:' + type, data)
  }

</script>

<style lang="scss">
  @import '@/style/global';

  .page-user-account-permission{
    padding-top: 10px;
    .title{
      color: $color-title;
      font-size: 14px;
      padding-bottom: 20px;
      font-weight: bold;
    }
    .item{
      margin-bottom: 20px;
      border: 1px $color-border solid;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;

      &:hover{
        border-color: $color-body;
      }

      &.on{
        border-color: $color;
      }

      .name{
        color: $color-title;
        font-size: 14px;  
      }
      .body{
        color: $color-body;
        font-size: 12px;
        padding-top: 3px;
      }
      img{
        float: left;
        margin: 0 10px 0 -10px;
        height: 45px;   
      }
    }
  }
</style>